<template>
  <div class="main-container">
    <div class="right item-bg">
      <div class="title">
        <span>试卷详情</span>
        <a-button @click="back" style="float: right" type="primary">返回</a-button>
      </div>
      <div class="topic-table paperInfo-table">
        <table class="info-table" border="1">
          <tr>
            <td class="td-title">科目代码</td>
            <td>{{ paperInfo.kmdm || 'XXX' }}</td>
            <td class="td-title">评阅科目</td>
            <td>{{ paperInfo.kmmc || 'XXX' }}</td>
            <td class="td-item" v-if="userInfo.userType == '3' || userInfo.userType == ''">
              <div class="td-title">评阅模式</div>
              <div>{{ pymsEnum[`pyMs_${paperInfo?.pyMs}`] }}</div>
            </td>

            <td
              class="td-item"
              v-if="
                userInfo.userType == '3' || userInfo.userType == '6' || userInfo.userType == '2'
              "
            >
              <div class="td-title">评阅组长</div>
              <div>{{ paperInfo.fzls || 'XXX' }}</div>
            </td>
          </tr>
          <tr>
            <td class="td-item" v-if="userInfo.userType == '1'">
              <div class="td-title">评阅组长</div>
              <div>{{ paperInfo.fzls || 'XXX' }}</div>
            </td>
            <td class="td-title">评阅教师</td>
            <td colspan="7" style="text-align: left; padding-left: 15px">
              <span v-for="(item, index) in paperInfo.pjlss" :key="index">
                <span v-if="index !== paperInfo.pjlss.length - 1">{{ item }} 、</span>
                <span v-else>{{ item }}</span>
              </span>
            </td>
          </tr>
        </table>
        <div class="grade">
          <p
            >试卷总分数：<span style="color: #e63636; font-size: 16px; font-weight: 700">{{
              paperInfo.sjzfs
            }}</span>
            <span> 分</span>
          </p>
          <div class="progress">
            <span>试卷评阅进度：</span>
            <a-progress
              :stroke-color="{
                '0%': '#0078FF',
                '100%': '#14C5F3',
              }"
              :percent="paperInfo?.ztms ? (paperInfo?.pytms / paperInfo?.ztms).toFixed(2) * 100 : 0"
            />
          </div>
        </div>
      </div>
      <a-row class="search" v-if="userInfo.token != '3'">
        <a-col :span="8">
          <label>评阅教师</label>
          <a-select
            allowClear
            ref="select"
            v-model:value="pjls"
            style="width: 100px"
            placeholder="请选择"
            :options="teacherOptions"
            :field-names="{ label: 'lsxm', value: 'pjls' }"
          >
          </a-select>
        </a-col>
        <a-col :span="8">
          <label>评阅模式</label>
          <a-select
            allowClear
            v-model:value="pjms"
            style="width: 120px"
            placeholder="请选择"
            :options="pymsOptions"
          >
          </a-select>
        </a-col>
        <a-col :span="3">
          <a-button class="search-btn" type="primary" @click="getList">查询</a-button>
        </a-col>
        <!-- <a-col :span="1" v-if="userInfo.userType == '6'">
          <a-button class="error-btn" type="primary" danger @click="markAbnormalByPaper">异常重评</a-button>
        </a-col> -->
      </a-row>
      <div class="list-table">
        <a-table
          :pagination="false"
          :columns="columns"
          :data-source="sjList"
          :row-selection="
            userInfo.token == '6' && { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
          "
          :scroll="{ y: '40vh' }"
        >
          <template v-slot:bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex == 'operation'">
              <!-- <span
                style="color: #e52a2a; cursor: pointer; margin: 0 5px"
                @click="showModal(record)"
              >
                异常重评
              </span> -->
              <span
                style="color: #1d86fc; cursor: pointer; margin: 0 5px"
                @click="toSee(record)"
                v-if="userInfo.userType != '1'"
              >
                查看试卷
              </span>
            </template>
          </template>
        </a-table>
        <a-pagination
          :show-total="total => `共 ${total} 条`"
          :show-size-changer="false"
          show-quick-jumper
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          @change="getList"
          @showSizeChange="getList"
        />
      </div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="异常重评"
      @ok="markAbnormalByTopic"
      okText="提交"
      @cancel="handelClose"
    >
      <a-form ref="form" :model="formStore" class="form">
        <a-row>
          <a-form-item name="kmdm" label="科目代码">
            <a-input v-model:value="formStore.kmdm" disabled></a-input>
          </a-form-item>
          <a-form-item name="kmmc" label="评阅科目">
            <a-input v-model:value="formStore.kmmc" disabled></a-input>
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item name="topic" label="模块题目">
            <a-input v-model:value="formStore.name" disabled></a-input>
          </a-form-item>
          <a-form-item name="pjls" label="评阅教师">
            <a-input v-model:value="formStore.lsxm" disabled></a-input>
          </a-form-item>
        </a-row>
        <a-form-item
          label="异常原因"
          name="describe"
          :rules="[{ required: true, message: '异常描述不能为空' }]"
        >
          <a-textarea
            v-model:value="formStore.describe"
            placeholder="请输入异常重评的原因..."
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { pymsEnum } from '/@/views/home/index/index'

import { defineComponent, onUnmounted } from 'vue'
export default defineComponent({
  name: 'Detail',
})
</script>
<script setup lang="ts">
import { onMounted, ref, getCurrentInstance, watch, h, computed } from 'vue'
import { APP_LOCAL_CACHE_KEY } from '/@/enums/cacheEnum'
import { createLocalStorage } from '/@/utils/cache'
import { useRouter, useRoute } from 'vue-router'
import { markYcForKssj, markYcForSjtm } from '/@/api/examinationAudit'
import { useMessage } from '/@/hooks/web/useMessage'
import { getTeacher } from '/@/api/examinationPaper'
import { useUserStore } from '/@/store/modules/user'
import { getPaperById, spPaperDetail } from '/@/api/teacher-sp'
import { getDictionaryList } from '/@/views/teacher/home/index'
const pymsOptions: any = ref([])
const { createMessage, createConfirm } = useMessage()
const userStore = useUserStore()

const router = useRouter()
const route = useRoute()
let { proxy } = getCurrentInstance()
const { mittBus } = proxy
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)
const hasIndex = ref(null)
const pjls = ref(null)
const pjms = ref(null)
const paperInfo = ref<any>({})
const detailItem = ref<any>({})
const ls = createLocalStorage()
const sjList = ref([])
const visible = ref(false)
const localCache = ls.get(APP_LOCAL_CACHE_KEY)
const userInfo = computed(() => userStore.getInfo)

const columns = ref([
  {
    title: '模块题目',
    dataIndex: 'title',
    key: 'title',
    align: 'center',
  },
  {
    title: '评阅教师',
    dataIndex: 'lsxm',
    key: 'lsxm',
    align: 'center',
  },
  {
    title: '评卷开始时间',
    dataIndex: 'pjkssj',
    key: 'pjkssj',
    align: 'center',
  },
  {
    title: '评卷结束时间',
    dataIndex: 'pjjssj',
    key: 'pjjssj',
    align: 'center',
  },
  {
    title: '评卷时长',
    dataIndex: 'pjsc',
    key: 'pjsc',
    align: 'center',
    sorter: {
      compare: (a, b) => a.length - b.length,
    },
  },
  {
    title: '标准分数',
    dataIndex: 'zzfs',
    key: 'zzfs',
    align: 'center',
    width: 100,
  },
  {
    title: '评卷分数',
    dataIndex: 'fs',
    key: 'fs',
    align: 'center',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    width: 200,
  },
])
//查看试卷
const toSee = row => {
  router.push({
    name: 'ReviewPaper',
    query: {
      id: row.sid,
      kmpyzt: row.kmpyzt,
    },
  })
}

const selectedRowKeys = ref([])

const onSelectChange = val => {
  console.log('selectedRowKeys changed: ', val)
  selectedRowKeys.value = val
}

// 获取试卷基本信息
const getDetail = id => {
  // getPaperInfo(id).then((res) => {
  //   if (res.code == 1) {
  //     paperInfo.value = res.data;
  //   }
  // });
  getPaperById(id).then(res => {
    if (res.code == 1) {
      paperInfo.value = res.data
    }
  })
}

// 返回列表页
const back = () => {
  mittBus.emit('back')
  hasIndex.value && router.go(-1)
}

// 获取评阅列表
const getList = () => {
  spPaperDetail({
    sjid: route.params.id ?? detailItem.value.id,
    page: current.value,
    pageSize: pageSize.value,
    pjms: pjms.value,
    pjls: pjls.value,
  }).then(res => {
    if (res.code == 1) {
      sjList.value = res.data.rows
      total.value = res.data.total
    }
  })
}

const form = ref()
const formStore = ref({})
const describe = ref('')
// 标记题目异常
const markAbnormalByTopic = async () => {
  await form.value.validate('describe')
  markYcForSjtm({
    sjtm: topicId.value,
    kssj: paperInfo.value.sjid,
    ycms: formStore.value.describe,
  }).then((res: any) => {
    if (res.code == 1) {
      createMessage.info('标记异常成功')
    } else {
      createMessage.error(res.message)
    }
  })
}

const topicId = ref(null)
const handelClose = () => {
  topicId.value = null
  visible.value = false
}

const showModal = row => {
  formStore.value = row
  topicId.value = row.tmId
  visible.value = true
}

const markAbnormalByPaper = () => {
  createConfirm({
    iconType: 'warning',
    title: () => h('span', '温馨提醒'),
    content: () => h('span', '您确定撤回重评吗？'),
    onOk: () => {
      markYcForKssj(paperInfo.value.sjid).then((res: any) => {
        if (res.code == 1) {
          createMessage.info('标记异常成功')
        } else {
          createMessage.error(res.message)
        }
      })
    },
  })
}

// 获取教师
const teacherOptions = ref()
const getTeacherOptions = async () => {
  try {
    const { data } = await getTeacher()
    // console.log(data);
    teacherOptions.value = data
  } catch (error) {
    console.log(error)
  }
}

onUnmounted(() => {
  mittBus.all.delete('toDetail')
})

onMounted(async () => {
  hasIndex.value = route.query?.hasIndex
  hasIndex.value && getList()
  hasIndex.value && getDetail(route.params.id ?? route.params.id)
  getTeacherOptions()
  // 树组件选中
  mittBus.on('toDetail', params => {
    detailItem.value = params.row
    getDetail(params.row.id)
    getList()
  })

  getDictionaryList('pyMs', pymsOptions)
})
</script>
<style lang="less" scoped>
.form {
  padding: 10px;
  box-sizing: border-box;
}

.main-container {
  display: flex;
  flex-direction: row;
  height: @c_height;
  justify-content: space-between;

  .left {
    width: 30%;
    // height: 100%;
    background-color: #fff;
    margin-right: 16px;

    .topic {
      padding: 16px;
    }
  }

  .item-bg {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
    border-radius: 6px 6px 6px 6px;
    position: relative;

    .title {
      width: 100%;
      padding: 16px;
      font-weight: bold;
      color: #3f4355;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      border-bottom: 2px solid #f0f1f8;
    }
  }

  .right {
    width: 100%;
    // height: 100%;
    background-color: #fff;

    .topic-table {
      padding: 15px;
      border-bottom: 2px solid #f0f1f8;

      .grade {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        p {
          font-size: 15px;
          font-weight: 700;

          span {
            font-size: 13px;
            font-weight: normal;
          }
        }

        .progress {
          width: 85%;
          display: flex;

          span {
            font-size: 15px;
            font-weight: 700;
          }
        }
      }
    }
  }

  :global(.topic-table.paperInfo-table .ant-progress) {
    width: 40%;
  }

  .info-table {
    width: 100%;
    border: 1px solid #f0f1f8;

    td {
      border: 1px solid #f0f1f8;
      height: 32px;
      line-height: 32px;
      text-align: center;
    }

    .td-title {
      color: #3f4355;
      font-weight: 700;
      font-size: 15px;
    }

    .td-item {
      // display: flex;
      text-align: center;
      border: none;

      div {
        display: inline-block;
        width: 50%;
      }

      & div:first-child {
        border-right: 1px solid #f0f1f8 !important;
      }
    }
  }

  .list-table {
    padding: 20px 15px 30px 15px;
    overflow-y: scroll;

    :global(.ant-table-cell::before) {
      display: none !important;
    }
  }
}

.search {
  padding: 20px 15px 0 15px;

  .ant-col {
    label {
      margin-right: 15px;
    }

    .ant-select {
      width: 65% !important;
    }

    .search-btn {
      border-radius: 5px;
      background-color: #136cc4;
      border-color: #136cc4;
    }

    .error-btn {
      border-radius: 5px;
      background-color: #e52a2a;
      border-color: #e52a2a;
      float: right;
    }
  }
}

::-webkit-scrollbar {
  width: 0 !important;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
</style>
<style lang="less">
.list-table {
  .ant-table-cell {
    background: #edf3ff !important;
  }

  .ant-select-selector,
  .ant-select-arrow {
    display: none;
  }

  .ant-pagination {
    margin-top: 20px;
  }
}
</style>
